<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/course/course'}">课程内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="detail-form mt-30" ref="form" :model="form" label-width="150px" style="width: 900px;">
          <div>
            <div class="fl-l">
              <el-form-item label="课程类型：" prop="contentType">
                <span v-if="form.contentType == 1">图文课程</span>
                <span v-if="form.contentType == 2">视频课程</span>
              </el-form-item>
              <el-form-item label="课程标题：" prop="courseTitle">
                <span style="white-space: nowrap;">{{form.courseTitle}}</span>
              </el-form-item>
            </div>
            <div class="fl-l" :class="form.courseTitleImage == '' && form.courseTitlePhoneImage =='' ? '' :'h-200'">
              <el-form-item label="pc课程封面图：" prop="courseTitleImage">
                <img :src="form.courseTitleImage" alt="" class="avatar" v-if="form.courseTitleImage">
              </el-form-item>
              <el-form-item label="手机课程封面图：" prop="courseTitlePhoneImage">
                <img :src="form.courseTitlePhoneImage" alt="" class="avatar" v-if="form.courseTitlePhoneImage">
              </el-form-item>
            </div>
            <div class="fl-l">
              <el-form-item label="视频：" prop="videoLink" v-if="form.contentType == 2">
                <template slot-scope="scope">
                  <el-button type="text" v-if="form.videoLink" @click="videoShow = true">查看视频</el-button>
                  <span v-else>无</span>
                </template>
              </el-form-item>
              <el-form-item label="PDF：" prop="pdfUrl">
                <template slot-scope="scope">
                  <el-button type="text" v-if="form.pdfUrl" @click="pdfShow = true">查看pdf文件</el-button>
                  <span v-else>无</span>
                </template>
              </el-form-item>
            </div>
            <div class="fl-l">
              <el-form-item label="课程分类：">
                <span>{{form.oneType}} > {{form.twoType}}</span>
              </el-form-item>
              <el-form-item label="排序：" prop="sort">
                <span>{{form.sort}}</span>
              </el-form-item>
            </div>
            
            <el-form-item label="课程描述：" prop="description">
              <div>{{form.description}}</div>
            </el-form-item>
            <el-form-item label="关键字：" prop="seoKeyword">
              <div>{{form.seoKeyword}}</div>
            </el-form-item>
            <el-form-item label="备注：" prop="memo">
              <div>{{form.memo}}</div>
            </el-form-item>
          </div>
          <el-form-item label="课程内容：" prop="content">
            <div class="img-box" style="width:700px" v-html="form.content"></div>
          </el-form-item>
          <el-form-item label="pdf转图片：" prop="pdfToPage">
            <div class="img-box" style="width:700px" v-html="form.pdfToPage"></div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <dialog-video v-if="form.videoLink" :visible.sync="videoShow" :data="form"></dialog-video>
    <dialog-pdf v-if="form.pdfUrl" :visible.sync="pdfShow" :data="form.pdfUrl"></dialog-pdf>
  </div>
</template>

<script>
import DialogVideo from '@/components/video'
import DialogPDF from '@/components/pdf'
  export default {
    components: {
      'dialog-video': DialogVideo,
      'dialog-pdf': DialogPDF
    },
    data () {
      return {
        form: {},
        content: '',
        pdfToPage: '',
        courseTypeList: [],
        courseTypeName: '',
        videoShow: false,
        pdfShow: false
      }
    },
    activated() {
      this.loadCourseType()
    },
    created() {
      this.loadCourseType()
    },
    methods: {
      loadCourseType() {
        this.$api.courseType.getList({}).then(res => {
          if(res.success){
            this.courseTypeList = res.data
            this.loadData()
          }
        })
      },
      loadData() {
        this.form.courseInfoId = this.$route.params.id
        this.$api.course.getDetail(this.form.courseInfoId).then(res => {
          if(res.success) {
            this.form = res.data
            console.info(this.form.pdfToPage)
            this.courseTypeList.forEach(item => {
              if(this.form.courseTypeId == item.courseTypeId){
                this.courseTypeName = item.courseName
              }
            })
          }
        })
      },
      goEdit() {
        this.$router.push('/course/course/edit/' + this.form.courseInfoId)
      },
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.$api.course.add(this.form).then(res => {
              if(res.success) {
                this.$message.success('保存成功')
                this.$refs.form.resetFields()
                this.$router.push('/course/course');
              }
            })
          }
        })
      },
      onReset() {
        this.$refs.form.resetFields()
      },
      onEditorChange(editor) {
        this.form.content = this.content
        // console.log('editor blur!', editor)
      },
      changeCourseType(val) {
        this.form.courseTypeId = val[1]
      }
    }
  }
</script>
<style lang="less">
 .img-box{
   p{
     width: 100%;
     img{
        width: 100%;
      }
   }
   
 }
</style>